<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>模板引擎文档 - layui.laytpl</title>
	<link rel="stylesheet" href="../libs/layui/layui-2.9.14/dist/css/layui.css">
	<script src="../libs//layui//layui-2.9.14/dist/layui.js"></script>
	<style>


	</style>
</head>

<body style="margin:100px ;">

<!-- //第一步：编写模版。你可以使用一个script标签存放模板，如： -->
<script id="demo" type="text/html">
  <h3>{{ d.title }}</h3>
  <ul>
  {{#  layui.each(d.list, function(index, item){ }}
    <li>
      <span>{{ item.modname }}</span>
      <span>{{ item.alias }}：</span>
      <span>{{ item.site || '' }}</span>
    </li>
  {{#  }); }}
  {{#  if(d.list.length === 0){ }}
    无数据
  {{#  } }} 
  </ul>
</script>

	<!-- //第二步：建立视图。用于呈现渲染结果。 -->
	<div id="view"></div>

	<script>
		layui.use('laytpl', function () {
			var laytpl = layui.laytpl;
			//第三步：渲染模版
			var data = { //数据
				"title": "Layui常用模块"
				, "list": [
					{ "modname": "弹层", "alias": "layer", "site": "layer.layui.com" },
					{ "modname": "表单", "alias": "form" }]
			}
			var getTpl = demo.innerHTML;
			var view = document.getElementById('view');
			laytpl(getTpl).render(data, function (html) {
				view.innerHTML = html;
			});
		});

	</script>
</body>

</html>